<template>
    <div>
        <div class=" itee">
            <img :src="queryData.avatar">
            <p class="p1">昵称：{{queryData.name}}</p>
            <p class="p1">ID：{{queryData.uid}}</p>
        </div>
        <div class="cell">转出金额（元）</div>
        <div class="line"></div>
        <div class="enter">
            <span>¥</span><input v-model="money"
                                 ref="money"
                                 type="number"
                                 pattern="[0-9]*"
                                 placeholder="请输入"
                                 class="text"
                                 onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )'
        >
        </div>
        <p class="p1">单次限额200，每天10次</p>
        <!--无支付密码，设置密码-->
        <confirm ref="confirm" :text="confirmText" confirmBtnText="设置" @confirm="setPass('6')"/>
        <!--输入密码-->
        <PassPop ref="paypass" :amount="money | moneyFmt(2, '￥')" @finishPass="finishPass" @forget="setPass('5')"/>
        <!--密码输入错误-->
        <confirm ref="confirms" :text="confirmText" confirmBtnText="修改密码" cancelBtnText="重新输入" @confirm="setPass('5')"
                 @cancel="re_enter"/>
        <div class="btn-db">
            <button-normal
                    widthPro="200"
                    heightPro="35"
                    :textBtn="textBtn"
                    color="#fff"
                    size="14"
                    @click.native="toRevise"
            ></button-normal>
        </div>
    </div>
</template>

<script>
    import API from '../../../request/api';
    import buttonNormal from '../../../components/common/buttonNormal';
    import {Toast} from 'vant';
    import PassPop from "../../../components/common/password-popup";
    import Confirm from "../../../components/common/confirm";

    export default {
        /**
         * 余额转账2
         * */
        name: 'transb',
        data() {
            return {
                id: '',
                phone: '',
                textBtn: '下一步',
                isPass: '', // 是否设置密码
                money: '', // 转出金额
                queryData: {},
                balance: '', // 账户余额
                confirmText: '您未设置支付密码，请先设置',


            };
        },
        components: {buttonNormal, PassPop, Confirm},
        computed: {},
        watch: {
            // 监听具体数据变化，并做相应的处理
        },
        methods: {
            toRevise() {
                //    下一步
                // this.$router.push({
                //     name: 'transb'
                // });
                // 转账金额是否小于余额
                if (!this.money) {
                    Toast('转出金额不能为空');
                } else if (this.money > 200) {
                    Toast('转出金额不能大于200');
                } else if (+this.money > +this.balance) {
                    Toast('余额不足');
                } else if (!Number.isInteger(Number(this.money))) {
                    Toast('转账金额必须是整数');
                } else {
                    //    填写且符合规范
                    if (this.isPass) {
                        this.$refs.paypass.show(); // 弹出填写支付密码弹框
                    } else {
                        this.$refs.confirm.show();// 弹出未设置支付密码弹框
                    }
                }
            },
            finishPass(pass) {
                // 支付密码验证
                let postData = {
                    uid: this.queryData.uid,
                    money: this.money,
                    pay_pass: pass
                };
                this.request.post(API.transAccount, postData).then((result) => {
                    console.log('getPayMethods-result', result, JSON.stringify(result.count));
                    if (result.status === 1) {
                        this.$router.push({
                            name: 'capital_steps',
                            query: {
                                type: 1, // 转账
                                name: this.queryData.name,
                                money: this.money
                            }
                        });
                    } else {
                        this.$toast(result.msg);
                    }
                });
            },
            setPass(type) {
                // 去设置支付密码
                this.$router.push({
                    name: 'phone',
                    query: {
                        type: type,
                        direct: 'transa',
                    }
                });
            },
            hasPaypass() {
                this.request.get(API.isSecurity)
                    .then((res) => {
                        this.isPass = res.exists;
                    })
                    .catch((err) => {
                        this.$toast.fail(err);
                    });
            },
            re_enter() {
                this.$refs.paypass.show(); // 弹出填写支付密码弹框
            },
        },
        created() {
            this.request.get(API.userCapital).then(res => {
                this.balance = res.balance;
            });
        },
        mounted() {
            this.queryData = this.$route.query;
            this.hasPaypass();
        }
    };

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '~assets/main.styl'
    .cell {
        cell()
        .can {
            color gray9
            font-size word14
        }
        .all {
            color main-color
            font-size word14
        }
    }

    .itee {
        flex-y()
        background white
        padding 6vw 0
        img {
            width vw(65)
            height vw(65)
            border-radius 50%
        }
        .p1 {
            word-vw(14px, gray9)
        }
    }

    .enter {
        flex-x()
        word-vw(36px, gray3)
        padding cellPadding bigMargin
        background-color grayF
        overflow hidden
        span {
            margin-right middleMargin
            word-vw(36px, gray3)
        }
        .text {
            word-vw(32px, gray3)
            /*text-align left*/
        }
        input:
        :-webkit-input-placeholder {
            word-vw(32px, gray9)
            line-height vw(32)
        }
    }

    .btn-db {
        position fixed
        width 100vw
        bottom 0
        background white
    }

    .p1 {
        word-vw(14px, gray9)
        padding 0 cellPadding
        line-height 2
    }

    @media (max-height: 400px) {
        .btn-db {
            display: none;
        }
    }
</style>
